<script setup lang="ts">
import "vant/es/toast/style";
import type { TeamType } from "@/models/team";
import { TeamStatusEnum } from "@/constants/teamStatusEnum";
import { showToast } from "vant";
import {
  deleteTeam,
  joinTeam,
  queryJoinTeam,
  quitTeam,
} from "@/services/teamService";
import { getCurrentLoginUserState } from "@/state/userState";
import { onMounted, ref } from "vue";
import { useRouter } from "vue-router";

const props = withDefaults(defineProps<{ teamList: TeamType[] }>(), {
  teamList: [],
});
const router = useRouter();
const addTeamId = ref(-1);
//加入队伍
const doJoinTeam = async (id, isSecret, password = "") => {
  if (isSecret) {
    //加密队伍
    addTeamId.value = id;
    show.value = true;
  } else {
    //非加密队伍
    const res = await joinTeam({ teamId: id, password });
    const { message, description, code } = res;
    if (code === 0) {
      showToast("加入成功");
      window.location.reload();
    } else {
      showToast(description.length ? description : message);
    }
  }
};
let user = null;
let joinTeamList = ref([]);
onMounted(async () => {
  //获取当前登录用户
  user = await getCurrentLoginUserState();
  //获取当前用户已加入的队伍
  const res = await queryJoinTeam();
  const { message, description, code, data } = res;
  if (code === 0) {
    joinTeamList.value = data;
  } else {
    showToast(description.length ? description : message);
  }
});
//判断某个队伍当前用户是否加入
const isJoin = (teamId) => {
  let res = false;
  joinTeamList.value.forEach((item) => {
    if (item.id === teamId) {
      res = true;
    }
  });
  return res;
};
//更新队伍
const doUpdate = (id) => {
  router.push({
    path: "/team/update",
    query: {
      id,
    },
  });
};
//退出队伍
const doQuit = async (teamId) => {
  const res = await quitTeam(teamId);
  const { message, description, code } = res;
  if (code === 0) {
    showToast("退出成功");
    window.location.reload();
  } else {
    showToast(description.length ? description : message);
  }
};
//解散队伍
const doDelete = async (id) => {
  const res = await deleteTeam(id);
  const { message, description, code } = res;
  if (code === 0) {
    showToast("解散成功");
    window.location.reload();
  } else {
    showToast(description.length ? description : message);
  }
};
//输入密码对话框
const show = ref(false);
const password = ref("");
const confirm = () => {
  doJoinTeam(addTeamId.value, false, password.value);
  password.value = "";
};
const cancel = () => {
  password.value = "";
};
</script>

<template>
  <van-card
    :tag="TeamStatusEnum[team.status]"
    :desc="team.description"
    :title="team.name"
    thumb="R-C.png"
    v-for="team in teamList"
    :key="team.id"
  >
    <template #footer>
      <van-button
        size="mini"
        @click="doDelete(team.id)"
        type="danger"
        plain
        v-if="team?.userVO?.id === user?.id"
        >解散队伍
      </van-button>
      <van-button
        size="mini"
        @click="doQuit(team.id)"
        type="danger"
        plain
        v-if="isJoin(team.id)"
        >退出队伍
      </van-button>
      <van-button
        size="mini"
        @click="doUpdate(team.id)"
        type="primary"
        plain
        v-if="team?.userVO?.id === user?.id"
        >更新队伍
      </van-button>
      <van-button
        size="mini"
        @click="doJoinTeam(team.id, team.status === 2)"
        type="success"
        plain
        v-if="!isJoin(team.id)"
        >加入队伍
      </van-button>
    </template>
    <template #price>
      <div>过期时间:{{ team.expireTime }}</div>
    </template>
    <template #tags>
      <div>队伍人数:{{ team.hasJoinNum }}/{{ team.maxNum }}</div>
    </template>
  </van-card>
  <van-dialog
    v-model:show="show"
    title="标题"
    show-cancel-button
    style="--van-dialog-header-padding-top: 10px"
    @confirm="confirm"
    @cancel="cancel"
  >
    <template #default>
      <van-field
        v-model="password"
        type="password"
        label="密码"
        placeholder="请输入密码"
      />
    </template>
  </van-dialog>
</template>

<style scoped></style>
